<template>
  <div>
    <div class="step flex_aic_jcc mt50">
      <div
        class="step-item flex"
        :class="{ active: stepCurrent === index }"
        v-for="(item, index) in step"
        :key="item.label"
      >
        <div class="left_line"></div>
        <div class="flex_fdc_aic">
          <div class="step-item-icon">
            <img :src="getIcon(item.icon, index)" alt="" />
          </div>
          <div class="step-item-label mt10">
            {{ item.label }}
          </div>
          <div class="step-item-time" style="height: 22px">
            {{ item.time && moment(item.time).format("YYYY-MM-DD HH:mm:ss") }}
          </div>
        </div>
        <div class="right_line"></div>
      </div>
    </div>

    <div class="statusText text-center mb10 mt32">{{ statusText }}</div>
    <div class="flex_aic_jcc" v-if="detail.refundStatus == -4">
      <span class="color-999999"
        >{{ $t("service.驳回理由") }}：{{
          detail.refundCheckRejectReason
        }}</span
      >
    </div>
    <div class="flex_aic_jcc" v-if="detail.refundStatus == -6">
      <span class="color-999999">{{ $t("service.退款金额") }}：</span>
      <span class="color-ff2b4e">{{ props.detail.refundReal }}</span>
    </div>
    <div
      class="flex_aic_jcc"
      v-if="detail.refundStatus == -6 && detail.refundCheckRejectReason"
    >
      <span class="color-999999">{{ $t("service.驳回理由") }}：</span>
      <span class="color-999999">{{
        props.detail.refundCheckRejectReason
      }}</span>
    </div>
    <div class="flex_fdc_aic mt24">
      <!-- 仅退款或退货退款 且为 买家发起退货申请状态时 -->
      <el-button
        type="primary"
        @click="showCheckSendDia = true"
        v-if="detail.refundStatus == -2"
        v-my-point="'sale:refundCheck'"
        >{{ $t("service.退款审核") }}</el-button
      >
    </div>

    <checkSendDia v-model="showCheckSendDia" :detail="detail" @rest="rest" />
  </div>
</template>

<script setup>
import { ref, onMounted, watchEffect } from "vue";
import moment from "moment";
import checkSendDia from "./checkSendDia.vue";
import Api from "@/config/api/api";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const iconMap = {
  fabu: new URL(`@/assets/images/order_lists/fabu.png`, import.meta.url).href,
  fabugray: new URL(
    `@/assets/images/order_lists/wancheng-gray.png`,
    import.meta.url
  ).href,
  fabuhot: new URL(
    `@/assets/images/order_lists/wancheng-hot.png`,
    import.meta.url
  ).href,
};

const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
  },
});
const emit = defineEmits(["rest"]);
const showCheckSendDia = ref(false);
const statusText = ref("");

const step = ref([
  {
    label: t("service.买家申请退款"),
    time: "2025-03-18 10:00:00",
    icon: "fabu",
  },
  {
    label: t("service.退款完成"),
    time: "2025-03-18 10:00:00",
    icon: "fabu",
  },
]);

const stepCurrent = ref(0);
const getIcon = (icon, index) => {
  let _icon = "";
  if (stepCurrent.value === index) {
    _icon = `${icon}hot`;
  } else if (stepCurrent.value > index) {
    _icon = `${icon}`;
  } else {
    _icon = `${icon}gray`;
  }
  return iconMap[_icon];
};
// "refundStatus": 0, //订单状态： -6退款完成 -5待卖家签收 -4退款驳回 -3退款中 -2申请退款
watchEffect(() => {
  const {
    refundStatus,
    refundAskTime,
    refundCheckTime,
    refundSignTime,
    refundVipSendTime,
  } = props.detail;
  step.value[0].time = refundAskTime;
  step.value[1].time = refundCheckTime || refundSignTime;
  if (refundStatus == -4) {
    statusText.value = t("service.商家已驳回买家的退款申请");
    stepCurrent.value = 1;
    return;
  }
  if (refundStatus == -2) {
    stepCurrent.value = 0;
    statusText.value = t("service.待处理退款申请");
  }
  if (refundStatus == -6) {
    stepCurrent.value = 1;
    statusText.value = t("service.已退款");
  }
});
// -6退款完成 -5待卖家签收 -4退款驳回 -3退款中 -2申请退款 -1撤销申请 0未申请
onMounted(() => {});

// 卖家签收，确认收货，退款结束
const finish = () => {
  Api.refundSign(props.detail.id).then((res) => {
    if (res.status === 200) {
      ElMessage.success(t("service.操作成功"));
      emit("rest");
    }
  });
};

const rest = () => {
  emit("rest");
};
</script>

<style lang="scss" scoped>
.step {
  .step-item {
    &-icon {
      img {
        width: 75px;
        height: 75px;
      }
    }
    &-label {
      color: rgb(153, 153, 153);
      line-height: 22px;
    }
    &-time {
      color: rgba(24, 144, 255, 0.5);
      line-height: 22px;
    }

    &.active {
      .left_line,
      .right_line {
        background-color: #1890ff;
      }
      .step-item-label {
        color: #1890ff;
      }
    }

    .left_line,
    .right_line {
      width: 50px;
      height: 1px;
      background-color: #e5e5e5;
      margin-top: 37.5px;
    }
  }
}

.statusText {
  font-size: 26px;
}
</style>
